<template>
  <div class="order-con" style="background:#14003D;">

    <!--验证窗口-->
    <div class="hexiao" id="hexiao" v-show="hexiao_show">
      <div style="padding: 15px 0 0;">
        <div class="hexiao-title">使用</div>
      </div>
      <div class="hexiao-shuru">
        <input v-text="true" value="" class="hexiao-input" placeholder="请输入商家核销秘钥" id="miyao"/>
      </div>
      <div class="hexiao-btn-dev">
        <button class="hexiaobtn" @click="cancelHexiao">取消</button>
        <div style="background-color:#ddd;width: 1px;height: 100%;"></div>
        <button class="hexiaobtn" @click="confirmHexiao">确定</button>
      </div>
    </div>

    <div class="bannerbox">
      <!--<img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt="" />-->
    </div>
    <!-- 标题 -->
    <div class="head">
      <!--<img src="../../assets/images/newimg/back.png" alt="">-->
      <span style="color:#fff;">我的订单</span>
    </div>
    <div style="height:100%;overflow-y: scroll;" id="myOrder">
      <div class="orderList" v-for="(item,index) in dataList" :key="index">
        <div class="order-num">
          <div>
            <span style="color:#fff;">订单号:{{item.orderName}}</span>
          </div>
          <span style="color:#fff;">{{item.orderDate | dataFormat('yyyy-MM-dd')}}</span>
        </div>
        <ul>
          <li v-for="(item,index) in item.orderValue" :key="index">
            <div>
              <img :src="item.businessPic" alt="">
              <span style="color:#fff;">{{item.businessName}}</span>
            </div>
            <span :class="item.after==1?'active':''" @click="hexiao(item.businessId,item.orderNum,item.after)">{{item.after==1?'已使用':'使用'}}</span>
          </li>
        </ul>
      </div>
    </div>




  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  export default {
    name: 'FmyOrder',
    data () {
      return {
        activityId: '',
        userOpenId: '',
        data: '',
        dataList: [],
        staticbtn: '1',
        sy:'使用',
        hexiao_show:false,
        businessId:'',
        orderNum:''
      }
    },
    methods: {

      cancelHexiao(){
        var that = this;
        that.hexiao_show = false;
      },

      hexiao(businessId,orderNum,order) {
        var that = this;

        if(order === 1){
          MessageBox({
            message: '已经使用过了!',
          });
          that.hexiao_show = false;
        }else{

          MessageBox.prompt('请输入商家核销秘钥').then(({ value, action })  => {
          if (action == 'confirm') {     //确认的回调
              that.businessId = businessId;
              that.orderNum = orderNum;
              this.confirmHexiao(value)
            }
          }).catch(err => {
            if (action == 'cancel') {     //取消的回调
              alert('取消核销')
            }
          });


        }
      },

      confirmHexiao(miyao){
        var that = this;
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/after?activityId=' +
            that.activityId + '&userOpenId=' + that.userOpenId + '&businessId=' + that.businessId+'&orderNum='+that.orderNum + '&miyao='+miyao
        }).then(function (resp) {
          console.log(resp);
          if (resp.status === 200) {
            if (Number(resp.data) === 1) {
              MessageBox({
                message: '核销成功!',
              });

              that.hexiao_show = false;

              setTimeout(function(){
                location.reload()
              },1000)

            } else if (Number(resp.data) === 0) {
              MessageBox({
                message: '核销失败!',
              });
              that.hexiao_show = false;

            } else if (Number(resp.data) === 99) {
              MessageBox({
                message: '使用失败，已经核销过了!',
              });
              that.hexiao_show = false;
            }else if(Number(resp.data) === -96){
              MessageBox({
                message: '使用失败，商家秘钥错误!',
              });
              that.hexiao_show = false;
            }else if(Number(resp.data) === -97){
              MessageBox({
                message: '使用失败，请输入核销秘钥!',
              });
              that.hexiao_show = false;
            }else if(Number(resp.data) === -98){
              MessageBox({
                message: '使用失败，商家未配置秘钥!',
              });
              that.hexiao_show = false;
            }else if(Number(resp.data) === -55){
              MessageBox({
                message: '使用失败，核销时间已经结束!',
              });
              that.hexiao_show = false;
            }else if(Number(resp.data) === -33){
              MessageBox({
                message: '使用失败，核销时间暂未开始!',
              });
              that.hexiao_show = false;
            }
          }
        })
      }
    },
    mounted () {
      var that = this;
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/myOrder?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId
      }).then(function (resp) {
        if (resp.status === 200) {
          that.dataList = resp.data

          // //判断是否过期了
          // if(resp.data.after === 1){
          //
          //
          // }else{
          //   that.dataList = resp.data.dataArray;
          //   console.log(that.dataList)
          // }

        }
      })
    },
    created () {
      this.activityId = this.$route.params.activityId;
      this.userOpenId = this.$route.params.openId;

    }
  }
</script>

<style scoped>

  .hexiao-input {
    color: #999;
    margin: 0;
    text-align: center;
    line-height: 36px;
  }
  .hexiao-title {
    text-align: center;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .hexiao-btn-dev {
    background-color: #fff;;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    line-height: 40px;
  }

  .hexiao-shuru {
    padding: 10px 20px 15px;
    border-bottom: 1px solid #ddd;
    min-height: 36px;
    position: relative;
  }
  .hexiaobtn {
    width: 50%;
  }
  /*核销校验框*/
  .hexiao {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    width: 85%;
    border-radius: 3px;
    font-size: 16px;
    -webkit-user-select: none;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s;
    transition: .2s;
  }

  .order-con {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
  }

  .backimg {
    width: 7.5rem;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -99;
  }
  /* 标题 */

  .head {
    width: 100vw;
    height: 1rem;
    /*background: #111111;*/
    font-size: 0.30rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(51, 54, 58, 1);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .head img {
    width: .2rem;
    position: absolute;
    left: .3rem;
    top: .35rem
  }

  .head span {
    font-size: .3rem;
    /*color: #fff;*/
  }
  /* 订单列表 */

  .orderList {
    width: 85%;
    margin: .5rem 5% 0;
    border-radius: 0.1rem;
    /*box-shadow: 0 0 0.24rem 0.05rem rgba(184, 184, 184, 0.35);*/
    /*background: rgba(204, 204, 204, .3);*/
    border:1px solid rgb(154, 135, 191);
    padding: .2rem;
  }

  .orderList .order-num,
  .order-num div>span {
    font-size: 0.29rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
  }

  .order-num,
  .orderList ul>li,
  .orderList ul>li div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .order-num div {
    color: #fff;
  }

  .orderList ul {
    padding-top: .2rem;
  }

  .orderList li {
    font-size: .24rem;
    color: #fff;
    border-bottom: .02rem solid #4444;
    padding: .15rem 0;
  }

  .orderList li:last-child {
    border-bottom: none;
  }

  .orderList li img {
    width: .9rem;
    height: .9rem;
  }

  .orderList li div span {
    padding-left: .2rem;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(74, 74, 74, 1);
  }

  .orderList li>span {
    width: 1.80rem;
    height: 0.56rem;
    border:0.01rem solid rgb(154, 135, 191);
    border-radius: 0.15rem;
    text-align: center;
    line-height: .56rem;
    font-size: 0.26rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color:rgb(154, 135, 191);
  }

  .orderList li>span.active {
    color: rgba(255, 255, 255, 1);
    background:rgb(154, 135, 191);
    border:0;
  }
</style>
